<template>
    <el-dialog title="导入文件" :visible.sync="dialogVisible" width="100" :before-close="handleClose">
      <span>目录：</span>
      <el-cascader :options="tree_list" v-model="dataList.directoryId" :show-all-levels="false" @change="threeChange"
        :props="{ value: 'id', checkStrictly: true }" clearable></el-cascader>
      <br />
      <br />
      <span>模型类型：</span>
      <el-cascader :options="modelTypeoptions" v-model="dataList.modelType" :show-all-levels="false" @change="modelChange"
        :props="{ value: 'value', checkStrictly: true }" clearable></el-cascader>
      <br />
      <br />
      <span>导入文件：</span>
      <br />
      <br />
      <el-upload class="upload-demo" drag :data="dataList" :action="Updata.action" :headers="myHeaders"
        :type="Updata.type" :on-success="onSuccess" :on-error="onSuccess">
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
      </el-upload>
    </el-dialog>
  </template>
  
  <script>
  import { getToken } from '@/utils/auth'
  export default {
    name: 'import',
    props: ['tree_list'],
    data() {
      return {
        myHeaders: { access_token: getToken() },
        dialogVisible: true,
        Updata: {
          action: process.env.VUE_APP_BASE_API + '/system/metadataModel/table/import',
          type: 'post',
        },
        dataList: {
          directoryId: "",
          modelType: "",
          type: 0,
        },
        modelTypeoptions: [
          {
            value: '字典表',
            label: '字典表',
          },
          {
            value: '关联表',
            label: '关联表',
            children: [
              {
                value: '业务数据表',
                label: '业务数据表',
              },
              {
                value: '基础数据表',
                label: '基础数据表',
              },
            ],
          },
        ],
      }
    },
    mounted() {
      this.dataList.modelType = this.modelTypeoptions[0].value
      this.dataList.directoryId = this.tree_list[0].children[0].id
    },
    methods: {
      threeChange(item) {
        this.dataList.directoryId = item[item.length - 1]
  
      },
      modelChange(item) {
        this.dataList.modelType = item[item.length - 1]
      },
      handleClose() {
        this.$emit('change')
      },
      onSuccess(response, file, fileList) {
  
        if (response.code === 0) {
          this.$message.success(response.msg)
        } else {
          this.$message.error(response.msg)
        }
        this.handleClose()
      },
      onError(err, file, fileList) {
        console.log(err, file, fileList)
      },
    },
  }
  </script>
  <style lang="scss">
  .span {
    color: #606266;
    font-weight: 700;
    font-size: 14px;
  }
  
  .el-upload {
    width: 100% !important;
  }
  
  .el-dialog__body {
    padding: 20px !important;
  }
  </style>
  